<template>
  <div>
    <a-card>
      <div style="margin-bottom: 20px">
        <el-row style="display: flex">
          <!-- <div style="display: flex;align-items: center;"><span>出库日期：</span>
            <el-date-picker
              size="small"
              v-model="ayncTime"
              style="width: 250px;"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker></div> -->
          <div style="margin-left: 20px; display: flex; align-items: center">
            <span> 发票日期：</span>
            <el-date-picker
              size="small"
              style="width: 250px"
              v-model="kpTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
          <div><el-button size="small" type="primary" style="margin-left: 12px" @click="serach()">查询</el-button></div>
          <div>
            <el-button size="small" type="primary" style="margin-left: 12px" @click="exportData('未生成货单明细表')"
              >导出</el-button
            >
          </div>
        </el-row>
      </div>
      <el-table
        ref="tableExport"
        highlight-selection-row
        border
        :max-height="height"
        size="mini"
        :data="tableDataList"
        style="width: 100%"
        v-loading="loading"
        @selection-change="tableChange"
      >
        <!-- <el-table-column type="selection" :selectable="checkSelectable" width="55">
        </el-table-column> -->
        <el-table-column prop="Code" label="发票编号" width="200"> </el-table-column>
        <el-table-column prop="BusType" label="销售类型" width="70"> </el-table-column>
        <el-table-column prop="CusCode" label="客户编号" width="200"> </el-table-column>
        <el-table-column prop="CusName" label="客户名称"> </el-table-column>
        <el-table-column prop="MadeDate" label="发票日期" width="95"> </el-table-column>
        <el-table-column prop="TaxAmount" label="含税金额合计" header-align="center" width="150" align="right">
          <template slot-scope="scope">
            <el-statistic group-separator="," :precision="2" :value="scope.row.TaxAmount"></el-statistic>
          </template>
        </el-table-column>
      </el-table>
      <!-- total, sizes, prev, pager, next, jumper -->
      <el-pagination
        @size-change="aynchandleSizeChange"
        @current-change="aynchandleCurrentChange"
        :current-page="ayncPagination.page"
        :page-sizes="[25, 50, 100]"
        :page-size="25"
        style="text-align: right; margin-top: 5px"
        layout="total,prev,pager,next,sizes"
        :total="ayncPagination.total"
      >
      </el-pagination>
    </a-card>
  </div>
</template>
<script>
import moment from 'moment'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
  data() {
    return {
      ayncTime: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      kpTime: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      ayncData: [],
      qryWord: '',
      loading: false,
      selectionList: [],
      ayncPagination: {
        size: 25,
        page: 1,
        total: 0,
      },
      selectType: 1,
    }
  },
  props: {},
  components: {},
  methods: {
    checkSelectable(row) {
      if (row.State == 0) {
        // 禁用不可选行
        return false
      } else {
        return true
      }
    },
    open() {
      this.ayncTime = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      this.serach()
    },
    serach() {
      this.ayncPagination.page = 1
      this.getayncCodeList()
    },
    getayncCodeList() {
      this.loading = true
      this.$http
        .post('/InvoiceManagement/Inv_InvoiceApplyMain/GetAccountSalesAllList', {
          // this.$http.post('/InvoiceManagement/ST_RDRecord/GetRdRecordByRoleList', {
          PageIndex: this.ayncPagination.page,
          PageRows: this.ayncPagination.size,
          // PageIndex: 1,
          //  PageRows: 1000000,
          Search: {
            RdrecordStartDate: this.ayncTime ? this.ayncTime[0] : '',
            RdrecordEndDate: this.ayncTime ? this.ayncTime[1] : '',
            InvoiceStartDate: this.kpTime ? this.kpTime[0] : '',
            InvoiceEndDate: this.kpTime ? this.kpTime[1] : '',
            KeyWord: this.qryWord,
            // State: this.selectType
          },
        })
        .then((res) => {
          this.loading = false
          if (res.Success) {
            this.ayncData = res.Data
            // this.ayncPagination.total = this.ayncData.filter(item => item.State == this.selectType).length;
          } else {
            this.ayncData = []
            this.ayncPagination.total = 0
            this.$message.error(res.Msg)
          }
        })
    },
    aynchandleSizeChange(size) {
      this.ayncPagination.size = size
      // this.getayncCodeList()
    },
    aynchandleCurrentChange(page) {
      this.ayncPagination.page = page
      // this.getayncCodeList()
    },
    tableChange(arr) {
      this.selectionList = [...arr]
    },
    downloadFileInfo(data, name) {
      const blob = new Blob([data])
      const link = document.createElement('a')
      link.href = URL.createObjectURL(blob)
      // console.log(link.href)
      link.download = name + '.xlsx'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(link.href)
    },
    // 导出
    exportData(excelName) {
      console.log('导出了')
      this.$http
        .post(
          '/InvoiceManagement/Inv_InvoiceApplyMain/BillExport',
          {
            // this.$http.post('/InvoiceManagement/ST_RDRecord/GetRdRecordByRoleList', {
            PageIndex: this.ayncPagination.page,
            PageRows: this.ayncPagination.size,
            // PageIndex: 1,
            //  PageRows: 1000000,
            Search: {
              RdrecordStartDate: this.ayncTime ? this.ayncTime[0] : '',
              RdrecordEndDate: this.ayncTime ? this.ayncTime[1] : '',
              InvoiceStartDate: this.kpTime ? this.kpTime[0] : '',
              InvoiceEndDate: this.kpTime ? this.kpTime[1] : '',
              KeyWord: this.qryWord,
              // State: this.selectType
            },
          },
          { responseType: 'blob' }
        )
        .then((res) => {
          // window.open(res)
          this.downloadFileInfo(res, excelName)
        })
    },
    handleOk() {
      if (!this.selectionList.length) {
        return this.$message.warning('请选中后确定')
      }
      this.loading = true
      const arr = this.selectionList.map((item) => {
        return item.Id
      })
      this.$http.post('/InvoiceManagement/ST_RDRecord/AddBillListDataBySelectInvoice', arr).then((res) => {
        console.log(res)
        this.loading = false
        if (res.Success) {
          this.$emit('success')
          this.$message.Success(res.Data)
        } else {
          this.$message.error(res.Msg)
        }
      })

      console.log(this.selectionList)
    },
  },
  mounted() {
    this.open()
  },
  created() {},
  computed: {
    tableDataList() {
      this.ayncPagination.total = this.ayncData.filter((item) => item.State == this.selectType).length
      return this.ayncData
        .filter((item) => item.State == this.selectType)
        .slice(
          (this.ayncPagination.page - 1) * this.ayncPagination.size,
          this.ayncPagination.page * this.ayncPagination.size
        )
    },
    height() {
      return document.documentElement.clientHeight * 0.75
    },
  },
  watch: {},
}
</script>
<style lang="less" scoped>
/deep/ .el-statistic .con .number {
  font-size: 12px;
  padding: 0;
}

/deep/ .el-statistic .con {
  justify-content: right;
}
</style>
